<!--
* description: 包装样式
-->
<template>
  <section class="editCarBrand">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="包装样式"
      :append-to-body="true"
      :visible.sync="showDialog"
      width="1000px"
      @close="close"
    >
      <dialogHeader slot="title" title="包装样式" :styleType="$store.state.app.dialogType"></dialogHeader>
      <div class="filter-container filter-params">
        <el-row :gutter="26">
          <component
            v-for="comp in tableComponents.filter(o => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire+ comp.compKey : comp.compKey"
            :validrule="comp.validrule"
            :key="comp.compKey"
            :codeField="comp.codeField"
            :textField="comp.textField"
            :popupsKey="comp.compKey"
            :is="comp.component"
            :code="formField[comp.codeField]"
            :text="formField[comp.textField]"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
            :disabled="comp.disabled"
            :isRequire="comp.isRequire"
            :span="comp.span || 8"
            :isMul="comp.isMul"
            :labelName="comp.labelName"
            :readonly="comp.readonly"
            :showPlaceholder="comp.showPlaceholder"
            :dateOptionsType="comp.dateOptionsType"
            :options="comp.options"
          ></component>
        </el-row>
        <el-row :gutter="26">
          <el-table
            :data="tableData"
            style="width: 100%"
            height="400"
            border
            v-loading="listLoading"
          >
            <el-table-column label="序号" width="60" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="包材编号" prop="MATERIALS_CODE" align="center"></el-table-column>
            <el-table-column label="包材名称" prop="MATERIALS_NAME" align="center"></el-table-column>
            <el-table-column label="包材数量" prop="MATERIALS_NUM" align="center"></el-table-column>
          </el-table>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
  </section>
</template>
<script>
import { formMixins } from "@/components/wms/mixins/formMixins";
import request from "@/utils/request";
export default {
  // 组件混入对象
  mixins: [formMixins],
  components: {
    dialogHeader: () => import("@/components/dialogHeader") //弹窗标题
  },
  props: {
    isShow: { type: Boolean, default: false },
    rowData: { type: Object, default: {} }
  },
  data() {
    return {
      // 查询条件
      listQuery: {
        pageIndex: 1,
        pageSize: this.$config.defaultPageSize
      },
      pageTotal: 0,
      // 显示加载中
      listLoading: false,
      // 是否显示
      showDialog: this.isShow,
      // 表格数据
      tableData: [],

      // 动态组件-查询条件
      tableComponents: [
        {
          compKey: "editTable_compKey1",
          labelName: "备件编号",
          codeField: "PART_CODE",
          component: () => import("@/components/wms/commonInput"),
          type: "inputText",
          isMust: true,
          readonly: true,
          showPlaceholder: ""
        },
        {
          compKey: "editTable_compKey2",
          labelName: "备件名称",
          codeField: "PART_NAME",
          component: () => import("@/components/wms/commonInput"),
          type: "inputText",
          isMust: true,
          readonly: true,
          showPlaceholder: ""
        },
        {
          compKey: "editTable_compKey3",
          labelName: "包装数量",
          codeField: "PART_NUM",
          component: () => import("@/components/wms/commonInput"),
          type: "inputText",
          isMust: true,
          readonly: true,
          showPlaceholder: ""
        }
      ],
      formField: {
        PART_CODE: "",
        PART_NAME: "",
        PART_NUM: ""
      }
    };
  },
  created() {
    if (this.showDialog) {
      this.queryTable();
    }
  },
  methods: {
    close() {
      this.showDialog = false;
      this.$emit("detailStyleClose");
    },
    queryTable() {
      let reqData = {
        STYLE_CODE: this.rowData.STYLE_CODE
      };
      this.listLoading = true;
      request({
        url: "/mp/wm/vl/warehouse/packTask/queryMaterialsStyle.do",
        method: "post",
        data: reqData
      })
        .then(res => {
          this.listLoading = false;
          if (res.result === "1") {
            if (res.mapRow) {
              this.formField.PART_CODE = res.mapRow.PART_CODE;
              this.formField.PART_NAME = res.mapRow.PART_NAME;
              this.formField.PART_NUM = res.mapRow.PART_NUM;
            }
            if (res.listRow && res.listRow.length > 0) {
              this.tableData = res.listRow;
            }
          } else {
            if (res.msg || res.debugMsg) {
              this.$message({
                message: res.debugMsg ? res.debugMsg : res.msg,
                uration: 2000
              });
            }
          }
        })
        .catch(err => {
          console.info(err);
          this.listLoading = false;
        });
    }
  }
};
</script>
